<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 遍历集合 -->
      <h3>学生列表：</h3>
      <ul>
        <!-- v-for指令  遍历数组 遍历是  用of 或 in 将遍历的对象放入变量中 -->
        <li v-for="(stu,index) in students" :key="index">
            {{stu.id}}-{{stu.name}}-{{stu.age}} {{index}}
        </li>
      </ul>

      <hr>
      <h3>dog对象</h3>
      <ul>
        <!-- 遍历对象时 遍历的内容是值 索引是属性名 -->
        <li v-for="(d,j) of dog" :key="j">
           {{j}} {{d}}
        </li>
      </ul>

      <hr>
      <!-- 遍历str字符串 -->
      <h3>遍历字符串</h3>
      <ul>
        <li v-for="(s,k) of str" :key="k">
            {{s}} {{k}}
        </li>
      </ul>

      <hr>
      <!-- 遍历1-100 -->
      <h3>遍历指定次数</h3>
      <ul>
        <li v-for="(number,index) of 100" :key="indexk">
            {{number}} {{index}}
        </li>
      </ul>


      
    </div>
  </body>
</html>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        /* 定义一个数组 存储多个对象 */
        students: [
          { id: "001", name: "张三", age: 18 },
          { id: "002", name: "李四", age: 19 },
          { id: "003", name: "王五", age: 20 },
          { id: "004", name: "赵六", age: 21 },
          { id: "005", name: "田七", age: 22 },
          { id: "006", name: "杨八", age: 23 },
        ],
        //定义对象
        dog:{
            name:'旺财',
            age:5,
            color:'黄色'
        },
        //字符串
        str:'hello'
      };
    },
  });
</script>
<!-- 
 v-for指令：用于展示列表数据  语法：
 <li v-for="(变量,索引) of|in 遍历的源数据" :key="索引">
    {{变量}} {{索引}}
 </li>
 :key是为了更好的遍历对象的唯一标识
 v-for可以便利  数组  对象  字符串(用得少)  指定次数（用得少） 



 -->
